<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="活动名称" required="">
          <el-input v-model="searchForm.activityName" placeholder="用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select v-model="searchForm.status" placeholder="用户状态">
            <el-option label="未开始" value="-1"></el-option>
            <el-option label="取消" value="-2"></el-option>
            <el-option label="进行中" value="1"></el-option>
            <el-option label="已结束" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-date-picker
            v-model="searchForm.date"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getActivityList">查询</el-button>
          <el-button type="primary" @click="resetForm">重置</el-button>
          <el-button type="primary" @click="addActivity">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="height: 65vh;overflow-y: scroll;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="activityName" label="活动名称" width="140">
        </el-table-column>
        <!-- <el-table-column prop="imgPath" label="活动图片" width="180">
          <template slot-scope="scope">
            <img class="itemImg2" :src="IMGPATH + scope.row.imgPath" alt="" />
          </template>
        </el-table-column> -->
        <el-table-column prop="hostName" label="主办方姓名" width="180">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="180">
        </el-table-column>
        <el-table-column prop="status" label="活动状态">
          <template slot-scope="scope">
            {{ activeStatus[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="recFlag" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" @click="goToDetail(scope.row.activityId)">详情</el-button>
            <el-button type="primary" @click="deleteAct(scope.row.activityId)">取消活动</el-button>

            <!-- <el-upload
              style="display: inline; margin-left: 10px"
              class="avatar-uploader"
              :show-file-list="false"
              :action="BASEURL + '/activity/uploadPic'"
              :data="{'activityId': scope.row.activityId}"
              :on-success="handleSu"
            > 
              <el-button type="primary">上传图片</el-button>
            </el-upload> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableSize"
      @current-change="pagechange">
    </el-pagination>
    <el-dialog title="新建活动" :visible.sync="editView">
      <el-form ref="form" class="newForm" :rules="rules" :model="activityForm" label-width="130px">
        <el-form-item label="活动名称" prop="activityName">
          <el-input v-model="activityForm.activityName"></el-input>
        </el-form-item>
        <el-form-item label="活动介绍" prop="introduce">
          <el-input v-model="activityForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="主办方" prop="hostName">
          <el-input v-model="activityForm.hostName"></el-input>
        </el-form-item>
        <el-form-item label="高级座位票价" prop="highPrice">
          <el-input-number v-model="activityForm.highPrice"></el-input-number>
        </el-form-item>
        <el-form-item label="中端座位票价" prop="midPrice">
          <el-input-number v-model="activityForm.midPrice"></el-input-number>
        </el-form-item>
        <el-form-item label="低端座位票价" prop="lowPrice">
          <el-input-number v-model="activityForm.lowPrice"></el-input-number>
        </el-form-item>
        <el-form-item label="活动海报">
          <el-upload
            v-if="!createDiaShowImg"
            style="display: inline; margin-left: 10px"
            class="avatar-uploader"
            :show-file-list="false"
            :action="BASEURL + '/activity/uploadPic'"
            :on-success="handleSu"
          > 
            <el-button type="primary">上传图片</el-button>
          </el-upload>
          <img v-else class="itemImg" :src="IMGPATH + activityForm.imgPath" alt="" />
        </el-form-item>
        <el-table :data="placeList">
          <el-table-column prop="day" label="日期" width="120" fixed="left">
          </el-table-column>
          <el-table-column label="08:00-09:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '08:00:00' + '09:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'08:00:00','09:00:00',scope.row['08:00:00-09:00:00'] == '占用')"
              :class="scope.row['08:00:00-09:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '08:00:00' + '09:00:00') ? '已选' : scope.row['08:00:00-09:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="09:00-10:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '09:00:00' + '10:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'09:00:00','10:00:00',scope.row['09:00:00-10:00:00'] == '占用')"
              :class="scope.row['09:00:00-10:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '09:00:00' + '10:00:00') ? '已选' : scope.row['09:00:00-10:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="10:00-11:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '10:00:00' + '11:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'10:00:00','11:00:00',scope.row['10:00:00-11:00:00'] == '占用')"
              :class="scope.row['10:00:00-11:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '10:00:00' + '11:00:00') ? '已选' : scope.row['10:00:00-11:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="11:00-12:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '11:00:00' + '12:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'11:00:00','12:00:00',scope.row['11:00:00-12:00:00'] == '占用')"
              :class="scope.row['11:00:00-12:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day +  '11:00:00' + '12:00:00') ? '已选' : scope.row['11:00:00-12:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="12:00-13:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '12:00:00' + '13:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'12:00:00','13:00:00',scope.row['12:00:00-13:00:00'] == '占用')"
              :class="scope.row['12:00:00-13:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '12:00:00' + '13:00:00') ? '已选' : scope.row['12:00:00-13:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="13:00-14:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '13:00:00' + '14:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'13:00:00','14:00:00',scope.row['13:00:00-14:00:00'] == '占用')"
              :class="scope.row['13:00:00-14:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '13:00:00' + '14:00:00') ? '已选' : scope.row['13:00:00-14:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="14:00-15:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '14:00:00' + '15:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'14:00:00','15:00:00',scope.row['14:00:00-15:00:00'] == '占用')"
              :class="scope.row['14:00:00-15:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day +'14:00:00' + '15:00:00') ? '已选' : scope.row['14:00:00-15:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="15:00-16:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '15:00:00' + '16:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'15:00:00','16:00:00',scope.row['15:00:00-16:00:00'] == '占用')"
              :class="scope.row['15:00:00-16:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '15:00:00' + '16:00:00') ? '已选' : scope.row['15:00:00-16:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="16:00-17:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '16:00:00' + '17:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'16:00:00','17:00:00',scope.row['16:00:00-17:00:00'] == '占用')"
              :class="scope.row['16:00:00-17:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '16:00:00' + '17:00:00') ? '已选' : scope.row['16:00:00-17:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="17:00-18:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '17:00:00' + '18:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'17:00:00','18:00:00',scope.row['17:00:00-18:00:00'] == '占用')"
              :class="scope.row['17:00:00-18:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '17:00:00' + '18:00:00')  ? '已选' : scope.row['17:00:00-18:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="18:00-19:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '18:00:00' + '19:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'18:00:00','19:00:00',scope.row['18:00:00-19:00:00'] == '占用')"
              :class="scope.row['18:00:00-19:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '18:00:00' + '19:00:00') ? '已选' : scope.row['18:00:00-19:00:00'] }}
            </div>
            </template>
          </el-table-column>
          <el-table-column label="19:00-20:00" width="120">
            <template slot-scope="scope">
              <div :style="{backgroundColor:selectDate.includes(scope.row.day + '19:00:00' + '20:00:00') ? '#E6A23C' : ''}"
              @click="selectDateFn(scope.row.day,'19:00:00','20:00:00',scope.row['19:00:00-20:00:00'] == '占用')"
              :class="scope.row['19:00:00-20:00:00'] == '占用' ? 'inused' : 'canSelect'">
              {{ selectDate.includes(scope.row.day + '19:00:00' + '20:00:00') ? '已选' : scope.row['19:00:00-20:00:00'] }}
            </div>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="活动详情" :visible.sync="showActivityDetail">
      <div class="cDetail">活动详情：{{ activityDetail.activityName }}</div>
      <div class="cDetail">主办方名称：{{ activityDetail.hostName }}</div>
      <div class="cDetail">开始时间：{{ activityDetail.startTime }}</div>
      <div class="cDetail">结束时间：{{ activityDetail.endTime }}</div>
      <div class="cDetail">活动状态：{{ activeStatus[activityDetail.status] }}</div>
      <div class="cDetail">活动海报：</div>
      <div><img class="itemImg" :src="IMGPATH + activityDetail.imgPath" alt="" /></div> 
      <el-table :data="activityDetail.seats" style="width: 100%" max-height='720'>
        <el-table-column prop="type" label="座位等级" >
          <template slot-scope="scope">
            <div>{{ seatsypeObj[scope.row.type] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="票价" width="180">
        </el-table-column>
        <el-table-column prop="count" label="剩余张数" width="180">
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import api from "../network/home";

export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      editView:false,
      activityForm:{},
      activityDetail: {},
      showActivityDetail: false,
      activeStatus:{
        "-1":'未开始',
        "-2": '取消',
        "1": '进行中',
        "0": '已结束',
      },
      seatsypeObj:{
        "1":'高级',
        "2": '中端',
        "3": '低端',
      },
      tiemList:[],
      tiemList2:[],
      activeDateIndex:-1,
      tableSize:0,
      pageNum:1,
      placeList:[],
      selectDate:"",
      rules: {
        activityName: [
          { required: true, message: '活动名称不能为空', trigger: 'blur' },
        ],
        introduce: [
          { required: true, message: '活动介绍不能为空', trigger: 'blur' }
        ],
        hostName: [
          {  required: true, message: '主办方不能为空', trigger: 'blur' }
        ],
        highPrice: [
          { required: true, message: '高级座位票价不能为空', trigger: 'change' }
        ],
        midPrice: [
          { required: true, message: '中端座位票价不能为空', trigger: 'change' }
        ],
        lowPrice: [
          { required: true, message: '低端座位票价不能为空', trigger: 'change' }
        ],
      },
      createDiaShowImg: false
    };
  },
  computed: {},
  methods: {
    selectDateFn(day,startTime,endTime,flag){
      // console.log(day,s,e,flag);
      if(flag){
        this.$message.error("选中时间已被占用，请选择其他时间")
      } else {
        const stringify = day + startTime + endTime
        const index = this.activityForm.list.findIndex(({day: d,startTime: s,endTime: e}) => stringify == (d+s+e))
        if (index > -1) {
          this.activityForm.list.splice(index, 1)
        }else {
          this.activityForm.list.push({
            day,
            startTime,
            endTime
          })
        }
        this.selectDate = this.activityForm.list.map(({day: d,startTime: s,endTime: e}) => d+s+e).join('')
      }
    },
    pagechange(p){
      this.pageNum = p
      this.getActivityList()
    },
    getActivityList(){
      const { activityName, hostName, date, status } = this.searchForm;
      const [startTime, endTime] = date || []
      const params = {
        pageNum: this.pageNum,
        pageSize: 10,
        activityName,
        hostName,
        startTime,
        endTime,
        status
      };
      api.getActivityList(params).then((res) => {
        this.tableData = res.data.data.records;
        this.tableSize = res.data.data.total
        console.log(res.data.data.records);
      });
    },
    handleSu({data}){
      this.activityForm.imgPath = data
      this.$message.success('上传成功')
      this.createDiaShowImg = true
      // this.getActivityList()
    },
    changeFlag(id){
      const params = {
        userId: id
      };
      api.changeUserStatus(params).then(() => {
       this.getActivityList()
      });
    },
    resetForm(){
      this.searchForm = {}
      this.pageNum = 1
      this.getActivityList()
    },
    addActivity(){
      this.editView = true
      this.activityForm= {list: []}
      this.createDiaShowImg = false
      // api.addActivity()
      api.activityPlace().then(res=>{
        let map = {}
        let placeList = []
        this.placeList = res.data.data.forEach(item => {
          if(!map[item.day]){
            map[item.day] = [{startTime: item.startTime, endTime: item.endTime, status:item.status}]
          } else {
            map[item.day].push({startTime: item.startTime, endTime: item.endTime, status:item.status})
          }
        })
        Object.keys(map).forEach(key =>{
          let obj = {}
          map[key].forEach(item=>{
            obj[item.startTime + '-' + item.endTime] = item.status == 1? '占用' : '可选'
            obj.key = item.startTime + '-' + item.endTime
          })
          placeList.push({
            day: key,
            ...obj
          })
        })
        console.log(placeList);
        this.placeList = placeList
      })
    },
    
    onSubmit(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.activityForm.list.length == 0) {
            this.$message.error('请选择时间段');
          }
          const { activityName,list,  imgPath, introduce, placeIds, hostName, highPrice,midPrice,lowPrice } = this.activityForm;
          // const list = [{startTime, endTime}]
          const params = {
            imgPath,
            activityName, introduce, placeIds, hostName, list, highPrice,midPrice,lowPrice
          };
          api.addActivity(params).then((res) => {
            if (res.data.code == 500) {
              this.$message.error(res.data.data);
              return
            }
            console.log(res);
            this.editView = false
            this.getActivityList()
          });
        } else {
          this.$message.error('请填写完整信息');
        }
      });
    },
    cancel(){
      this.editView = false
    },
    goToDetail(id){
      api.actDetail(id).then((res) => {
        this.showActivityDetail = true
        this.activityDetail = res.data.data || {}
      });
    },
    deleteAct(id){
      api.deleteAct(id).then(() => {
       this.getActivityList()
       this.$message.success('取消成功')
      });
    }
  },
  mounted(){
    this.getActivityList()
  }
};
</script>

<style lang="scss" scoped>

.itemImg{
  margin-left: 50px;
  width: 200px;
  object-fit: cover;
  height: 200px;
}
.timelistBox{
  display: flex;
  flex-wrap: wrap;
}
.timelistItem{
  width: 120px;
  height: 40px;
  padding: 10px 20px;
  text-align: center;
  border: 1px solid #000;
  cursor: pointer;
}
.box-card{
  margin: 20px;
}
.cDetail{
  height: 50px;
  font-size: 20px;
  margin-left: 50px;
}
.itemDetail{
  margin-left: 50px;
  font-size: 18px;
  border: 1px solid ;
  width: 33%;
}
.itemImg2 {
  width: 120px;
  height: 70px;
  object-fit: cover
}
.inused{
  background-color: #F56C6C;
  text-align: center;
}
.canSelect{
  background-color: #67C23A;
  text-align: center;

}
</style>